{include file="common/header"/}
<style type="text/css">
.p10{padding:10px;}
.mediasList{ position: relative; }
.mediasList .mediasImg{width:100%; height:180px;position:relative;}
.mediasList .mediasImg [data-select="mediasImg"]{ width: 100%; height:100%; }
.mediasList .mediasImg .mediasTitle{position:absolute;left:0;right:0;bottom:0;height:25px; line-height:25px; padding:0px 10px; background:#000;color:#FFF;}
.article-add{ display:block; text-align:center;height:30px; line-height:30px; cursor:pointer; }
.mediasList .medias-item{ display:flex;  }
.mediasList .medias-item .medias-item-title{ flex:1}
.mediasList .medias-item .medias-item-img{ width: 60px; height:60px; }
.mediasList .medias-item .medias-item-img img{ width:100%;}
.news-left .active{ border:1px solid #44b549 !important}
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card layui-bg-gray">
          <div class="layui-card-body">
            <form class="layui-form layui-form-pane" lay-filter="form">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3 layui-col-sm6  layui-col-xs12">
                    <div class="layui-card">
                        <div class="layui-card-body news-left">
                            {volist name="info.child" id="vo1" key="k"}
                            {if $Think.lang.$k == 1}
                            <div class="mediasList active">
                                <div class="btnArr" style="position: absolute;right: 7.5px; top: 7.5px;z-index: 10;display: none;">
                                    <div class="layui-btn-group">
                                        <a data-url="{:url('delart')}?id={$vo1.id}" class="layui-btn layui-btn-danger layui-btn-xs del-item">删除</a>
                                    </div>
                                </div>
                                <div class="mediasImg">
                                    <img data-select="mediasImg" src="{$vo1.image}" alt="">
                                    <span class="mediasTitle" data-select="mediasTitle">{$vo1.title}</span>
                                </div>
                            </div>
                            {else}
                            <div class="mediasList p10">
                                <div class="btnArr" style="position: absolute;right: 7.5px; top: 7.5px;z-index: 10;display: none;">
                                    <div class="layui-btn-group">
                                        <a data-url="{:url('delart')}?id={$vo1.id}" class="layui-btn layui-btn-danger layui-btn-xs del-item">删除</a>
                                    </div>
                                </div>
                                <div class="medias-item">
                                  <div class="medias-item-title"><div data-select="mediasTitle">{$vo1.title}</div></div>
                                  <div class="medias-item-img"><img data-select="mediasImg" src="{$vo1.image}" alt=""></div>
                                </div>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                        
                        <a class="article-add transition" onclick="addItem()" title="添加图文"><i class="fa fa-plus"></i></a>
                    </div>
                </div>
                <div class="layui-col-md9 layui-col-sm6  layui-col-xs12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <label class="layui-form-label">公众号</label>
                                <div class=" layui-input-inline " id="box_catid">
                                    <select id="wx_id" lay-verify="required" lay-filter="checkChannel" name="wx_id">
                                        {volist name="wechat" id="vo"}
                                            <option value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <div class="layui-form-mid layui-word-aux red">*必填</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class=" layui-input-inline">
                                    <input type="text" name="title" id="title" lay-verify="required" placeholder="请输入标题" class="layui-input"> 
                                </div>
                                <div class="layui-form-mid layui-word-aux red">*必填</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">作者</label>
                                <div class=" layui-input-inline">
                                    <input type="text" name="author" id="author" placeholder="请输入作者" class="layui-input"> 
                                </div>
                                <div class="layui-form-mid layui-word-aux red">*必填</div>
                            </div>
                            
                            <div class="layui-form-item">
                                <label class="layui-form-label">封面图</label>
                                <div class="layui-input-inline">
                                    <input type="hidden" name="image" id="thumb" value="">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn layui-btn-primary" id="thumbBtn"><i class="icon icon-upload3"></i>点击上传</button>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" style="width:120px;max-height:100px;" id="muThumb" src="" title="">
                                            <p id="thumbText"></p>
                                        </div>
                                        <input name="show_cover_pic" id="show_cover_pic" value="1" type="checkbox" title="在正文顶部显示此图片">
                                    </div>                                
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">摘要</label>
                                <div class=" layui-input-inline">
                                    <textarea name="description" id="description" placeholder="请输入SEO摘要" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">详  情</label>
                                <div class="layui-input-block">
                                    <script id="ueditor_content" name="content" type="text/plain" style="width:98%; height:300px;"></script>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">原文地址</label>
                                <div class=" layui-input-inline">
                                    <input type="text" name="content_source_url" id="content_source_url" placeholder="原文地址" class="layui-input"> 
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="hidden" name="id"  >
                                    <button type="button" class="layui-btn" lay-submit="" lay-filter="Wxsubmit">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

{include file="common/footer"/}
<script src="/static/admin/layuiadmin/lib/ace/ace.js"></script>
<script>
var layForm;
var layedit;
var layeditIndex
var info = {:json_encode($info.child)};
// console.log(info)
layui.use(['form', 'layer','upload','layedit'], function(){
    var layer = layui.layer,$= layui.jquery;
    layForm = layui.form;
    var upload = layui.upload;
    layedit = layui.layedit;

    renderFrom();

    var uploadInst = upload.render({
        elem: '#thumbBtn'
        ,url: '{:url("UpFiles/image")}'
        ,accept: 'images' //普通文件
        ,exts: 'jpg|png|gif' //只允许上传压缩文件
        ,done: function(res){
            $('#muThumb').attr('src',res.url);
            $('#thumb').val(res.url);
            $('.news-left div.mediasList.active [data-select="mediasImg"]').attr('src',res.url);
        }
    });

    layedit.set({
        //暴露layupload参数设置接口 --详细查看layupload参数说明
        uploadImage: {
            url: '{:url("UpFiles/edit_image")}',
            accept: 'image',
            acceptMime: 'image/*',
            exts: 'jpg|png|gif|bmp|jpeg',
            size: '20480'
        }
    });
    layeditIndex = layedit.build('ueditor_content');
    layForm.on('submit(Wxsubmit)', function(data){
        $.ajax({
            url:"{:url('wechat.Wxmaterial/edit')}",
            dataType:"json", 
            type:"post",   
            data:{'json':JSON.stringify(info),'news_id':{$info.id}},
            success:function(res){
                if (res.code==1) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        window.parent.location.href = res.url;
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            },
            error:function(){
                return layer.msg('操作失败');
            }
        });
    });
    $(document).on('click','.news-left .mediasList',function(){
        $(this).addClass('active').siblings().removeClass('active');
        renderFrom();
    })
    
    // 标题修改
    $('#title,#author,#description,#content_source_url').keyup(function(){
        $('.news-left div.mediasList.active [data-select="mediasTitle"]').text($('#title').val());
    })
    // 鼠标滑过显示删除按钮
    $(document).on('mouseover','.mediasList',function(){
        $(this).find('.btnArr').show();
    })
    $(document).on('mouseout','.mediasList',function(){
        $(this).find('.btnArr').hide();
    });
    // 删除事件
    $(document).on('click','.del-item',function(){
        var obj = $(this);
        layer.confirm('此操作不可恢复，确定要删除吗', function(index){
            if (info.length==1) {
                layer.alert('最少保留一篇文章');return;
            }
            var url = obj.attr('data-url');
            $.ajax({
                url:url,
                dataType:"json", 
                type:"get",   
                success:function(res){
                    if (res.code==1) {
                        layer.closeAll();
                        var index = obj.parent().parent().parent().index();
                        info.splice(index,1);
                        obj.parent().parent().parent().remove();
                        $('.news-left div.mediasList').eq(0).addClass('active');
                        renderFrom();
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                },
                error:function(){
                    return layer.msg('获取失败');
                }
            });
        })
        
    })
    setInterval(function() {
        var index = $('.news-left div.mediasList.active').index();
        info[index]['wx_id'] = $('#wx_id option:selected').val();
        info[index]['title'] = $('#title').val();
        info[index]['author'] = $('#author').val()?$('#author').val():'管理员';
        info[index]['show_cover_pic'] = $('#show_cover_pic:checked').val()?$('#show_cover_pic:checked').val():0;
        info[index]['image'] = $('#thumb').val()?$('#thumb').val():'/static/admin/images/image.png';
        info[index]['description'] = $('#description').val();
        info[index]['content'] = layedit.getContent(layeditIndex);
        info[index]['content_source_url'] = $('#content_source_url').val();
    }, 500);
});
function addItem(){
    var count = $('.news-left .mediasList').length;
    if(count >= 7){
        return layer.msg('最多允许增加7篇文章');
    }
    var html = '';
    html +='<div class="mediasList p10">'
    html +='<div class="btnArr" style="position: absolute;right: 7.5px; top: 7.5px;z-index: 10;display: none;">'
    html +='<div class="layui-btn-group">'
    html +='<a data-url="{:url('delart')}?id={$vo1.id}" class="layui-btn layui-btn-danger layui-btn-xs del-item">删除</a>'
    html +='</div>'
    html +='</div>'
    html +='<div class="medias-item">'
    html +='<div class="medias-item-title">'
    html +='<div data-select="mediasTitle">新建图文</div>'
    html +='</div>'
    html +='<div class="medias-item-img">'
    html +='<img data-select="mediasImg" src="/static/admin/images/image.png" alt="" />'
    html +='</div>'
    html +='</div>'
    html +='</div>'
    var data = {
        'id':0,
        'wx_id':$('#wx_id option:selected').val(),
        'title':'新建图文',
        'author':'',
        'image':'/static/admin/images/image.png',
        'description':'',
        'show_cover_pic':0,
        'content':'',
        'content_source_url':'',
    };
    info.push(data);
    $('.news-left').append(html);
}
function renderFrom(){
    var index = $('.news-left div.mediasList.active').index();
    forminfo = info[index];
    layedit.setContent(layeditIndex, forminfo.content, false);
    
    $('#muThumb').attr('src',forminfo.image);
    layForm.val('form',forminfo);
}
</script>